import { useState } from 'react';
import { Card, Divider, Typography, Space, Row, Col, Alert } from 'antd';
import UserSelector from './components/UserSelector';
import './App.css';

const { Title, Paragraph, Text } = Typography;

function App() {
  const [singleUser, setSingleUser] = useState<string>('');
  const [multipleUsers, setMultipleUsers] = useState<string[]>([]);

  // 單選用戶變更處理
  const handleSingleUserChange = (value: string | string[]) => {
    setSingleUser(value as string);
  };

  // 多選用戶變更處理
  const handleMultipleUsersChange = (value: string | string[]) => {
    setMultipleUsers(value as string[]);
  };

  return (
    <div className="app-container">
      <Card>
        <Typography>
          <Title level={2}>用戶選擇器組件示例</Title>
          <Paragraph>
            此示例展示了用戶選擇器組件的使用方法，包括單選和多選模式。
          </Paragraph>
        </Typography>

        <Divider />

        <Row gutter={[24, 24]}>
          <Col span={24} md={12}>
            <Card title="單選模式" bordered>
              <Space direction="vertical" style={{ width: '100%' }}>
                <Paragraph>
                  <Text strong>說明：</Text> 單選模式下只能選擇一個用戶。
                </Paragraph>
                <UserSelector 
                  placeholder="請選擇一個用戶" 
                  onChange={handleSingleUserChange} 
                />
                {singleUser && (
                  <Alert
                    message="已選擇用戶"
                    description={`您選擇了: ${singleUser}`}
                    type="success"
                    showIcon
                  />
                )}
              </Space>
            </Card>
          </Col>

          <Col span={24} md={12}>
            <Card title="多選模式" bordered>
              <Space direction="vertical" style={{ width: '100%' }}>
                <Paragraph>
                  <Text strong>說明：</Text> 多選模式下可以選擇多個用戶。
                </Paragraph>
                <UserSelector 
                  placeholder="請選擇多個用戶" 
                  multiple 
                  onChange={handleMultipleUsersChange} 
                />
                {multipleUsers.length > 0 && (
                  <Alert
                    message="已選擇用戶"
                    description={`您選擇了: ${multipleUsers.join(', ')}`}
                    type="success"
                    showIcon
                  />
                )}
              </Space>
            </Card>
          </Col>
        </Row>

        <Divider />

        <Typography>
          <Paragraph>
            <Text type="secondary">
              提示：可以通過輸入關鍵詞進行搜索，支持模糊匹配。
            </Text>
          </Paragraph>
        </Typography>
      </Card>
    </div>
  );
}

export default App;
